<template>
    <el-container>
  <el-header>
    <el-row>
      <el-card class="box-card" style="height:60px"> 
            <el-col :span="2" :offset="0">
                课程列表
            </el-col>
            
      </el-card>
    </el-row>
  </el-header>

  <el-container>
    <el-aside width="200px" style="background-color: #FFFFFF">
      <el-card class="box-card">
        <el-tree :data="TreeData" default-expand-all  :props="TreeProps" @node-click="handleNodeClick"></el-tree>
      </el-card>
      
    </el-aside>
    <el-main>
      
    
      <el-row :gutter="20" style="width:1500px">
       <el-card class="box-card">
          <div slot="header" class="clearfix">
            
            <span><i class="el-icon-search"></i>筛选查询</span>
            <!-- <el-col :span="2" :offset="0" :push="20">
              <el-button >高级检索</el-button>
            </el-col>
            
            <el-col :span="2" :offset="0" :push="20">
              <el-button >查询结果</el-button>
            </el-col> -->
            <el-button style="float:right">高级检索</el-button>
             <el-button style="float:right" @click="mohu">查询结果</el-button>
          </div>
          <div>
            <el-form  ref="form" :model="mohuForm"  label-width="80px" :inline="false" size="normal">
              <el-col :span="4" :offset="0">
              <el-form-item label="课程名称">
              <el-input v-model="mohuForm.courseName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0" :push="5">
              <el-form-item label="课程分类">
              <el-input v-model="mohuForm.classId"> </el-input>
            </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0" :push="10">
              <el-form-item label="课程价格">
              <el-input v-model="mohuForm.coursePrice"> </el-input>
            </el-form-item>
            </el-col>
            </el-form>
          </div>
        </el-card>
      </el-row>
      <el-row :gutter="20">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>课程数据列表</span>
    <el-button style="float: right; padding: 3px 0" @click="dialogAdd = true" type="text">添加课程</el-button>
    </div>
  <div>
     <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      >
    </el-table-column>
    <el-table-column
      fixed
      prop="courseId"
      label="编号"
      width="50px"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="url"
      label="商品图片"
      align="center"
      >
      <template slot-scope="scope">
        <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.url">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column
      prop="courseName"
      label="商品名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="上传人"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="courseInfo"
      label="备注"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="coursePrice"
      label="价格"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="courseStatus"
      label="状态"
      width="150px"
      align="center"
      >
     <template slot-scope="scope">
       <el-switch
        :plain=true
        @change="changeStatus($event,scope.row,scope.$index)"
        v-model="scope.row.courseStatus"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="上线"
        inactive-text="下线"
        :active-value="2"
        :inactive-value="3">
      </el-switch>
     </template>
    </el-table-column>
     <el-table-column
      prop="courseNo"
      label="排序"
      align="center"
      >
    </el-table-column>
     <el-table-column
      prop="courseClassName"
      label="分类"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="saleNum"
      label="销量"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="courseCstatus"
      label="审核状态"
      align="center"
      >
      <template slot-scope="scope">
            <!-- scope.row 包含表格里当前行的所有数据 -->
            <span :class="scope.row.courseCstatus?'act':'inact'">
                {{scope.row.courseCstatus | courseCstatus}}<br>
                <el-button type="text" size="medium" @click="cStatus($event,scope.row,scope.$index)">审核详情</el-button>
            </span>
        </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="WatchClick(scope.row,scope.$index)" type="text" size="medium">查看</el-button>
        <el-button @click="updateCourse(scope.row,scope.$index)" type="text" size="medium">编辑</el-button><br>
        <el-button type="text" size="medium">日志</el-button>
        <el-button type="text" @click="deleteCourse(scope.row,scope.$index)" size="medium">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 点击审核详情,审核页面弹窗 -->
  <el-dialog title="审核详情" :visible.sync="dialogCstatus">
            <el-table :data="Cstatus"   border>
              <el-table-column align="center" property="implementDate" label="审核时间" width="150"></el-table-column>
              <el-table-column align="center" property="userName" label="审核人员" width="200"></el-table-column>
              <el-table-column align="center" property="result" label="审核结果"></el-table-column>
               <el-table-column align="center" property="remarks" label="反馈详情"></el-table-column>
            </el-table>
  </el-dialog>
  <!-- 点击查看按钮,课程详细信息页面弹窗 -->
  <el-dialog title="课程详细信息" :visible.sync="dialogWatch">
    <el-descriptions class="margin-top" colon title="" :column="3" :size="`medium`" border>
    
      <el-descriptions-item>
        <template slot="label">
          课程名称
        </template>
        {{Watch.courseName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上传时间
        </template>
        {{Watch.createDate}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上传人
        </template>
        {{Watch.username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          课程售价
        </template>
        {{Watch.coursePrice}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          课程关键字
        </template>
        {{Watch.coursePrimary}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          课程分类
        </template>
        {{Watch.courseClassName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          点赞量
        </template>
        {{Watch.likeNum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          收藏量
        </template>
        {{Watch.collectNum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          评论量
        </template>
        1000
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          课程介绍
        </template>
        {{Watch.courseInfo}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          备注
        </template>
        {{Watch.courseInfo}}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">预览图片</el-divider>
    <div class="block">
      <el-image :src="Watch.url"></el-image>
      <el-divider content-position="left">视频预览</el-divider>
    </div>
  </el-dialog>
  <!-- 点击编辑按钮,修改课程信息 -->
<el-dialog title="编辑课程" :visible.sync="dialogUpdate">
  <el-form ref="update" :model="update" label-width="80px" :inline="true">
    <el-descriptions title="" direction="horizontal" :column="3" border>
     
          <template slot="extra">
            <el-button type="primary" @click="submitUpdate" size="small">确定</el-button>
          </template>
        <el-descriptions-item label="课程名称"><el-input v-model="update.courseName"></el-input></el-descriptions-item>
        <el-descriptions-item label="上传时间">
        <el-date-picker
          format="yyyy-MM-dd"
          v-model="update.createDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="上传人">
           <el-select name=""
            v-model="update.createId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="updateSelect"
            >
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="课程售价"><el-input v-model="update.coursePrice"></el-input></el-descriptions-item>
        <el-descriptions-item label="课程关键字"><el-input v-model="update.coursePrimary"></el-input></el-descriptions-item>
        <el-descriptions-item label="课程分类">
          <!-- <el-input v-model="update.courseClassName"></el-input> -->
           <el-select v-model="update.classId" placeholder="请选择">

              <el-option-group
                v-for="item in TreeData"
                :key="item.id"
                :label="item.name">
                  <!-- <el-option-group
                    v-for="items in item.children"
                    :key="items.id"
                    :value="items.name"
                    :label="items.name"> -->
                    <el-option v-for="option in item.children"
                      :key="option.id"
                      :value="option.id"
                      :label="option.name">
                      </el-option>
                    
                  <!-- </el-option-group> -->
              </el-option-group>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="课程介绍"><el-input v-model="update.courseInfo"></el-input></el-descriptions-item>
        <el-descriptions-item label="课程备注"><el-input v-model="update.courseIntro"></el-input></el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">预览图</el-divider>
    <el-image :src="update.url"></el-image>
    <el-divider content-position="left">上传新的封面</el-divider>
      <el-upload
        class="upload-demo"
        ref="upload"
        :son-success="uploadSuccess"
        action="http://localhost:8081/Course/upload"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
  </el-form>
</el-dialog>



<!-- 点击添加按钮,添加课程 -->
<el-dialog title="添加课程" :visible.sync="dialogAdd">
  <el-form :model="addForm" ref="form"  label-width="100px" :inline="false" size="normal">
    <el-form-item label="课程分类" size="normal">
      <el-select v-model="addForm.classId" placeholder="请选择">
                <el-option-group
                  v-for="item in TreeData"
                  :key="item.id"
                  :label="item.name">
                      <el-option v-for="option in item.children"
                        :key="option.id"
                        :value="option.id"
                        :label="option.name">
                        </el-option>
                </el-option-group>
            </el-select>
    </el-form-item>
    <el-form-item label="课程名称" size="normal">
        <el-input v-model="addForm.courseName" size="medium"/>
    </el-form-item>
    <el-form-item label="课程介绍" size="normal">
        <el-input
          type="textarea"
          :autosize="{ minRows: 7, maxRows: 4}"
          placeholder="请输入内容"
          v-model="addForm.courseIntro">
        </el-input>
    </el-form-item>
    <el-form-item label="课程售价" size="normal">
       <el-input v-model="addForm.coursePrice" size="medium"/>
    </el-form-item>
    <el-form-item label="课程上架" size="normal">
       <el-switch
        v-model="addForm.courseStatus"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="上线"
        inactive-text="下线"
        :active-value="2"
        :inactive-value="3">
      </el-switch>
    </el-form-item>
     <el-form-item label="课程关键词" size="normal">
       <el-input v-model="addForm.coursePrimary" size="medium"/>
    </el-form-item>
    <el-form-item label="上传封面" size="normal">
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8081/Course/upload"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="上传视频" size="normal">
        <el-upload class="avatar-uploader el-upload--text" 
        action="http://localhost:8081/Course/upload" 
        :show-file-list="false" 
        :on-success="handleVideoSuccess" 
        :before-upload="beforeUploadVideo" 
        :on-progress="uploadVideoProcess">
        <video v-if="addForm.url !=''" :src="addForm.url" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
        <i v-else-if="addForm.url =='' " class="el-icon-plus avatar-uploader-icon"></i>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="videoUploadPercent"></el-progress>
    </el-upload>
    <p class="text">请保证视频格式正确，且不超过10M</p>
    </el-form-item>
    <el-form-item label="课程备注" size="normal">
        <el-input
          type="textarea"
          :autosize="{ minRows: 7, maxRows: 4}"
          placeholder="请输入内容"
          v-model="addForm.courseInfo">
        </el-input>
    </el-form-item>
    
  </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogAdd = false">取 消</el-button>
      <el-button @mouseup="addCourse"  @click="addCourse">确 定</el-button>
    </div>
</el-dialog>
</div>



  <!-- 分页 -->
    <el-col :span="5" :offset="0" :push="15" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
             background
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
    </el-col>
</el-card>
      </el-row>
      
    </el-main>
  </el-container>
</el-container>
 
</template>

<script>
export default {
    data() {
      return {
        //上传视频进度条
        videoUploadPercent:0,
        //控制视频组件
        videoFlag:false,
        //控制审核详情页面的变量
        dialogCstatus:false,
        //控制查看页面的变量
        dialogWatch:false,
        //控制编辑页面的变量
        dialogUpdate:false,
        //控制添加页面的变量
        dialogAdd:false,
        //查看页面数据
        Watch:{},
        //添加课程表单数据
        addForm:{
          // createId:'',
        },
        //模糊查表单数据
        mohuForm:{
          courseName:'',
          coursePrice:'',
          classId:''
        },
        //编辑课程from表单数据
        update:{
          
        },
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 5, // 每页的数据条数
        //  表格数据
        tableData: [],
        //弹窗内审核详情表格信息
        Cstatus:[],
        // 树的数据
        TreeData: [],
        //树指定数据格式
        TreeProps: {
          children: 'children',
          label: 'name'
        },
        //编辑页面上传人下拉框数据
        option:[],
        //上传人下拉框的值
        
      }
    },
    methods:{
      
      //视频上传成功的函数
      handleVideoSuccess(response,res, file) {     //获取上传图片地址
          console.log(response)
          this.videoFlag = false;
          // 清空进度条
          setTimeout(()=>{
            this.videoUploadPercent=0
          },2000)
          if(res.status == "success"){
              // this.addForm.videoUploadId = res.data.uploadId;
              this.addForm.url = response;
          }else{
              this.$message.error('视频上传失败，请重新上传！');
          }
      },
      //视频上传进度条控制
      uploadVideoProcess(event, file, fileList){
          console.log(file)
          console.log(event)
          this.videoFlag = true;
          this.videoUploadPercent = parseInt(event.percent);
      },
      //上传视频之前执行的方法
      beforeUploadVideo(file) {
          const isLt10M = file.size / 1024 / 1024  < 100;
          if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
              this.$message.error('请上传正确的视频格式');
              return false;
          }
          if (!isLt10M) {
              this.$message.error('上传视频大小不能超过500MB哦!');
              return false;
          }
      },
      // 文件上传成功的钩子
      uploadSuccess(response, file, fileList){
        console.log(response)
        console.log(file)
        console.log(fileList)
      },
      mohu(){
        this.$http.get('/Course/getTable',{
          params:
             this.mohuForm
        }).then(res=>{
            this.tableData=res.data
        })
      },
      //提交编辑页面的数据
      submitUpdate(){
        this.$refs.upload.submit(); 
        console.log(this.update)
        this.$http({
          method:'post',
          url:'/Course/updateCourse',
          data:JSON.parse(JSON.stringify(this.update))
        }).then(res=>{
          this.$message()
        })

      },
      //编辑页面实时模糊查
      updateSelect(name){
        console.log(name)
        if(name!==''){
         this.$http.get('/Course/getUser',{
            params:{
              name:name
            }
          }).then(res=>{
            console.log(res.data)
              this.option=res.data
          })
        }
         
      },
      //获取树的数据
      getTreeData(){
        this.$http.get("/Course/getTree").then(res=>{
          console.log(res.data)
          this.TreeData=res.data;
        })
      },
      //查看按钮点击事件
      WatchClick(row,index){
          this.dialogWatch=true;
          for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.Watch=this.tableData[i]
                    }
                }
         console.log(this.Watch)
      },
      //编辑按钮点击事件
      updateCourse(row,index){
          console.log(this.TreeData)
          this.dialogUpdate=true
          for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.update=this.tableData[i]
                    }
                }
      },
      //当树节点被点击的事件
      handleNodeClick(data,node,node1){
        // 获取表格数据
        console.log(data.id)
        if(data.children){
          this.$http.get("/Course/getTable",{
            params:{
              classId:data.id
            }
        }
        ).then(res=>{
             console.log(res.data)
          this.tableData=res.data
        })
        }
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      //上线下线状态改变时的回调
      changeStatus(e,row,index){
          let status=this.tableData[index].courseStatus;
          let id=this.tableData[index].courseId;
          var params = new URLSearchParams();
          params.append('id',id)
          params.append('status',status)
        this.$http({
        method:'post',
        url:'/Course/UpdateStatus',
        data:params,
        }).then(res=>{
            console.log(res.data)
            if(res.data==200){
                this.$message({
                    message:"状态更新成功",
                    type:'success'
                })
            }else{
                this.$message({
                    message:"状态更新失败",
                    type:'error'
                })
                if(e==2){
                    this.tableData[index].courseStatus=3;
                }else if(e==3){
                    this.tableData[index].courseStatus=2;
                }
            }
        })
      },
      //删除指定课程
      deleteCourse(row,index){
        var params = new URLSearchParams();
        params.append("id",row.courseId)
        this.$http({
        method:'post',
        url:'/Course/deleteCourse',
        data:params,
        }).then(res=>{
            if(res.data){
                for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.tableData.splice(i, 1)
                    }
                }
                this.$message({
                    message:"删除成功",
                    type:'success'
                })
            }else{
                this.$message({
                    message:"删除失败",
                    type:'error'
                })
            }
        })
      },
      //审核详情界面
      cStatus(e,row,index){
        //改变变量值，触发弹窗
        this.dialogCstatus=true
        var params = new URLSearchParams();
        params.append("courseId",row.courseId)
        this.$http({
          method:'post',
          url:'/Course/cStatus',
          data:params
        }).then(res=>{
          this.Cstatus=res.data
        })

      },
      //添加课程的函数
      addCourse(){
        console.log(this.addForm)
        this.$http({
          method:'post',
          url:'/Course/addCourse',
          data:JSON.parse(JSON.stringify(this.addForm))
        }).then(res=>{
          this.$message("添加成功")
          this.dialogAdd=false
        })
        
      },
    },
    
    filters:{
      // 过滤审核状态
      courseCstatus(status){
        if(status==2){
          return '已审核'
        }else if(status==3){
          return '未审核'
        }else if(status==4){
          return '审核中'
        }else if(status==5){
          return '审核失败'
        }else if(status==6){
          return '其他'
        }
      }
    },
    created(){
      this.getTreeData();
      
    }


}
</script>


<style lang="scss" scoped>
body{
  background: #F9F9F9;
}
.el-header {
    margin-bottom: 50px;
    // background-color: #6BC9BB;
    // background-color: #F2F6FC;
    color: #333;
    text-align: center;
    // line-height: 60px;
  }
.el-row{
  margin-bottom: 30px;
}
</style>